<template>
	<view class="">
		<view class="form-content">
			<view class="addEmployee-item">
				<view class="">
					个人头像
				</view>
				<view class="">
					<template v-if="userInfo.imageurl">
						<image @click="selectImg" class="addEmployee-item-imgs" :src="userInfo.imageurl"
							mode="scaleToFill"></image>
					</template>
					<template v-else>
						<text class="addEmployee-item-text" @click="selectImg">请选择</text>
						<image class="addEmployee-item-img" src="../../../static/right_back.png" mode=""></image>
					</template>
				</view>
			</view>
			<view class="addEmployee-item">
				<view class="">
					城市
				</view>
				<view class="" @click="locationHanlders" style="display: flex;align-items: center;">
					{{userInfo.city?userInfo.city:""}}
					<image class="addEmployee-item-location" src="../../../static/auth_location.png" mode="scaleToFill">
					</image>
				</view>
			</view>
			<view class="addEmployee-item">
				<view class="">
					姓名
				</view>
				<view class="">
					<!-- <input type="text" v-model="userInfo.user_name" placeholder="请输入" /> -->
					<text>{{userInfo.user_name}}</text>
				</view>
			</view>
			<view class="addEmployee-item addEmployee-item-last">
				<view class="">
					一句简介
				</view>
				<view class="">
					<input type="text" v-model="userInfo.brief" placeholder="请输入" @blur="briefBlur" />
				</view>
			</view>
		</view>
		<!-- <view class="addEmployee-btn">
			<button type="primary" @click="confirm" style="background-color: #007aff;">确认提交</button>
		</view> -->
	</view>
</template>

<script>
	import {
		uploadUserImg,
		updateBrief,
		updateCity,
		uploadPicture
	} from '@/api/user.js'
	import {
		latLongGetAddress
	} from '@/api/base.js';
	import { toBase64 } from "@/common/base64.js"
	export default {
		data() {
			return {
				userInfo: {
					member_card: {},
					city: ''
				},
				employeeName: '',
				employeeTel: "",
				popActive: 1,
				postNameOld: "",
				postName: ""
			}
		},
		methods: {
			briefBlur: function() {
				updateBrief(this.userInfo.id, this.userInfo.brief).then(res => {
					//更新成功
					console.log("res===", res);
				})
			},
			openBotPop: function() {
				this.$refs.popup.open("bottom")
			},
			selectHandler: function(name, num) {
				this.postNameOld = name;
				this.popActive = num;
			},
			popConfirm: function() {
				this.postName = this.postNameOld;
				this.$refs.popup.close()
			},
			confirm: function() {
				if (!this.userInfo.user_name.trim()) {
					uni.showToast({
						title: "请输入姓名"
					})
					return
				}
				if (!this.userInfo.brief) {
					uni.showToast({
						title: "请输入简介"
					})
					return
				}
				updateBrief(this.userInfo.id, this.userInfo.brief).then(res => {
					//更新成功
					console.log("res===", res);
					uni.navigateBack()
				})
			},
			locationHanlders: function() {
				const that = this
				uni.showModal({
					title: "是否重新获取城市？",
					cancelText: "否",
					confirmText: "是",
					success() {
						that.locationHanlder()
					}
				})
			},
			locationHanlder: function() {
				const that = this
				uni.getLocation({
					geocode: true,
					success(res) {
						latLongGetAddress({
							lat: res.longitude,
							long: res.latitude
						}).then(res => {
							const city = res.data.city
							that.userInfo.city = res.data.city.substring(0, city.length - 1)
							//上传接口
							updateCity(that.userInfo.id, that.userInfo.city).then(res => {
								console.log("城市更新成年");
							})
						})
					}
				})
			},
			selectImg: function() {
				const that = this
				uni.chooseImage({
					count: 1,
					success(result) {
						//进行图片上传
						console.log('图片===',result);
						console.log('图片==1111=',result.tempFilePaths[0]);
						uni.getImageInfo({
							src:result.tempFilePaths[0],
							success(res){
								//转base64
								 toBase64(res.path).then(baseResult=>{
									 uploadPicture('data:image/png;base64,'+baseResult).then(baseRes=>{
										 console.log('shangchuan 64====',baseRes);
										 uploadUserImg(that.userInfo.id, baseRes.data.path).then(() => {
										 	// that.userInfo.imageurl = res.path
											that.userInfo.imageurl = baseRes.data.url
											console.log('url===',that.userInfo.imageurl);
										 })
									 })
									
								 })
								
							}
						})
					}
				})
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: "个人资料"
			})

		},
		mounted() {
			if (this.userInfo.city) {
				this.locationHanlder()
			}
		},
		onLoad(option) {
			const that = this;
			const eventChannel = this.getOpenerEventChannel();
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('userInfo', function(data) {
				console.log('页面地址==', data)
				that.userInfo = data.data
			})
		}
	}
</script>

<style scoped lang="scss">
	.form-content {
		margin-top: 10px;
		background-color: #fff;
	}

	.addEmployee-item {
		display: flex;
		justify-content: space-between;
		padding: 15px 0px;
		margin: 0 10px;
		border-bottom: 1px solid #F0F0F0;
		font-size: 12px;

		input {
			text-align: right;
		}

		&-imgs {
			width: 30px;
			height: 30px;
			border-radius: 50%;
		}

		&-img {
			width: 10px;
			height: 10px;
			margin-left: 5px;
		}

		&-last {
			border: none;
		}

		&-text {
			color: #B3B3B3;
		}

		&-location {
			width: 17px;
			height: 20px;
		}
	}

	.addEmployee-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		box-shadow: 0rpx -4rpx 6rpx 0rpx rgba(230, 230, 230, 0.75);
		background-color: #fff;
		height: 80px;
		display: flex;
		align-items: center;

		button {
			width: 80%;
		}
	}

	.popup-title {
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		padding: 20px 0;
	}

	.popup-item-text {
		font-size: 14px;
		padding: 10px;
		border-bottom: 1px solid #eee;

		&-active {
			color: #2D56C5;
		}
	}

	.popup-item-btn {
		display: flex;
		justify-content: center;
		padding: 20px 0;

		button {
			width: 90%;
		}
	}

	.uni-input-placeholder {
		font-size: 12px !important;
	}
</style>